<!-- 轮播图编辑页面 -->
<template>
  <div class="slide_edit">
    <!-- 标题 -->
    <div style="overflow: hidden;">
      <h2 class="title"> {{isId ? '编辑' : '添加'}}轮播图</h2>
    </div>
    <!-- 表单 -->
    <el-form 
      ref="form" 
      :model="formData" 
      label-position="left" 
      label-width="150px"
      @submit.prevent> 
      <el-form-item label="轮播图图片">
        <!-- <el-input v-model='formData.img' placeholder="轮播图图片"></el-input> -->
        <el-upload
          action="http://localhost:3000/upload/"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :class="isblock ? 'upload' : ''">
          <img :src="formData.img" alt="" v-if="isId">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="所属文章的Id">
        <el-input v-model='formData.article_id' placeholder="轮播图所属文章的Id"></el-input>
      </el-form-item>
      <el-form-item label="轮播图类别">
        <el-input v-model='formData.classification' placeholder="index、match..."></el-input>
      </el-form-item>
      <el-form-item class="button">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts'>
import { ElMessage } from 'element-plus';
import { computed, defineComponent, reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '../../http/axios';

export default defineComponent({
  name: 'SlideEdit',
  props: ['id'],
  setup(props) {
    const data = reactive({
      route: useRoute(),
      router: useRouter(),

      // 监听 props，如果有传递id值为 true，反之。
      isId: computed(() => {
        return props.id ? true : false ;
      }),

      // 表单数据
      formData: {
         img: '',
         article_id: '',
         classification: ''
      },

      // 图片上传相关
      dialogVisible: false,
      isblock: false,

      // 点击确定按钮触发事件
      submit: function() {
        // 存在 id 时，点击确定按钮，触发修改，否则触发创建
        props.id ? updata() : create();
      },

      // 点击返回按钮
      cancel: function(): void {
        data.router.push('/slides/list');
      }
    });

    // 页面挂载后，触发
    onMounted(() => {
      props.id && getSlide();
    })

    // 编辑时，获取数据
    async function getSlide(): Promise<any> {
      try {
        const { data: slideData } = await axios.get(`slides/${props.id}`);
        data.formData = slideData;
        data.dialogVisible = true;
      } catch(Err) {
        ElMessage.error('请求数据错误');
      }
    }

    // 修改轮播图
    async function updata(): Promise<any> {
      // 获取表单数据
      const { data: myupdata, status } = await axios.put(`slides/${props.id}`, data.formData);
      if (status == 200) {
        ElMessage.success(myupdata.success);
        data.router.push('/slides/list');
      }
    }

    // 创建轮播图
    async function create(): Promise<any> {
      await axios.post('/slides', data.formData);
      data.router.push('/slides/list');
      
    }

    // 图片上传后触发
    function handleSuccess(response: any) {
      console.log('已上传');
      data.formData.img = response.data[0].url;
      console.log(data.formData.img)
      data.isblock = true;
    }

    // 移除图片时触发
    function handleRemove() {
      console.log('图片移除');
      data.isblock = false;
    }

    const refData = toRefs(data);
    return { 
      ...refData,
      handleSuccess,
      handleRemove
    }
  },
})

</script>

<style lang="scss" scoped>

.slide_edit {
  height: 100%;
  // 表单
  .el-form {
    width: 70%;
    margin-top: 20px;
    .button {
      .el-form-item__content {
        .el-button {
          float: left;
        }
      } 
    }
  }
}
</style>
